*{
    margin: 0;
    padding: 0;
}
nav{
    height: 118px;
    width: 100%;
    position: relative;
}
nav>img{
    margin-left: 170px;
}
nav>.bjys>.fdj{
    width: 15px;
    height: 15px;
    background-image: url(../images/serach.png);
    background-size: contain;
    position: absolute;
    z-index: 5;
    left: 23px;
    top: 10px;
    }
nav>.bjys{
    width: 62px;
    height: 40px;
    background-color: #00aee4;
    position: absolute;
    z-index: 1;
    left: 1000px;
    top: 20px;
}
.ssk{
    width: 398px;
    height: 38px;
    border: 1px solid #e4eaec;
    color: #e4eaec;
    position:absolute;
    left: 600px;
    top: 20px;
}
.ssk>p{
    margin-top: 5px;
}
a{
    text-decoration: none;
}
ul{
    height: 60px;
}
ul>li{
    float: left;
    list-style: none;
    margin-top: 20px;
    width: 100px;
    position: relative;
    height: 50px;
}
ul li:nth-child(1)::after{
    content: "";
    display: block;
    width: 100px;
    height: 3px;
    top: 20px;
    background-color: #00aee4;
}
.xlk1{
    width: 230px;
    height: 100px;
    background-color: white;
    z-index: 5;
    position: absolute;
     display: none;
    margin-top: 23px; 
}
.xlk1>p{
    display: block;
    width: 100%;
    height: 50px;
}
li:nth-child(2):hover .xlk1{
    display: block;
    background-color: white;
    position: absolute;
}
/* 公司简介开始 */
.gsjj{
    width: 100%;
    height: 50px;
}
.gsjj p{
    position: absolute;
    z-index: 2;
}
ul li:nth-child(2) .xlk1 .gsjj::before{
    content: "";
    width: 0;
    height: 0;
    background-color: #00aee4;
    transition: all 1s; 
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 50px;
}
 ul li:nth-child(2) .gsjj:hover::before{
    width: 100%;
    height: 50px;
} 
/* 公司简介结束 */
/*智能理念开始 */
.znln{
    width: 100%;
    height: 50px;
}
ul li:nth-child(2) .xlk1 .znln::before{
    content: "";
    width: 0;
    height: 0;
    background-color: #00aee4;
    transition: all 1s; 
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 0px;
}
 ul li:nth-child(2) .znln:hover::before{
    width: 100%;
    height: 50px;
} 
/* 智能理念结束 */
/* 智能窗帘电机开始 */
.zncldj{
    width: 100%;
    height: 50px;
}
.zncldj p{
    position: absolute;
    z-index: 2;
}
ul li:nth-child(3) .xlk2 .zncldj::before{
    content: "";
    width: 0;
    height: 0;
    background-color: #00aee4;
    transition: all 1s; 
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 150px;
}

 ul li:nth-child(3) .zncldj:hover::before{
    width: 100%;
    height: 50px;
}
/* 智能窗帘电机结束 */
/* 空调伴侣开始 */
.ktbl{
    width: 100%;
    height: 50px;
}
.ktbl p{
    position: absolute;
    z-index: 2;
}
ul li:nth-child(3) .xlk2 .ktbl::before{
    content: "";
    width: 0;
    height: 0;
    background-color: #00aee4;
    transition: all 1s; 
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 100px;
}
 ul li:nth-child(3) .ktbl:hover::before{
    width: 100%;
    height: 50px;
}
/*空调伴侣结束 */
/* 智能家居开始 */
.znjj{
    width: 100%;
    height: 50px;
}
.znjj p{
    position: absolute;
    z-index: 2;
}
ul li:nth-child(3) .xlk2 .znjj::before{
    content: "";
    width: 0;
    height: 0;
    background-color: #00aee4;
    transition: all 1s; 
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 50px;
}
 ul li:nth-child(3) .znjj:hover::before{
    width: 100%;
    height: 50px;
}
/*智能家居结束 */
/* 各种传感器开始 */
.gzcgq{
    width: 100%;
    height: 50px;
}
.gzcgq p{
    position: absolute;
    z-index: 2;
}
ul li:nth-child(3) .xlk2 .gzcgq::before{
    content: "";
    width: 0;
    height: 0;
    background-color: #00aee4;
    transition: all 1s; 
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 0px;
}
 ul li:nth-child(3) .gzcgq:hover::before{
    width: 100%;
    height: 50px;
}
/*各种传感器结束 */
.xlk2{
    width: 230px;
    height: 200px;
    background-color: white;
    z-index: 5;
    position: absolute;
    display: none;  
    margin-top: 23px;
}
.xlk2>p{
    display: block;
    width: 100%;
    height: 50px;
}
li:nth-child(3):hover .xlk2{
    display: block;
    background-color: white;
    position: absolute;
}
ul li:nth-child(2) .xlk1 .gsjj::before{
    content: "";
    width: 100%;
    height: 0px;
    background-color: #00aee4;
     transition: all 1s; 
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 50px;
}
 ul li:nth-child(2) .gsjj:hover::before{
    width: 100%;
    height: 50px;
} 
/* 住宅开始 */
.zz{
    width: 100%;
    height: 50px;
}
.zz p{
    position: absolute;
    z-index: 2;
}
ul li:nth-child(4) .xlk3 .zz::before{
    content: "";
    width: 0;
    height: 0;
    background-color: #00aee4;
    transition: all 1s; 
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 150px;
}
 ul li:nth-child(4) .zz:hover::before{
    width: 100%;
    height: 50px;
}
/* 住宅结束 */
/* 酒店开始 */
.jd{
    width: 100%;
    height: 50px;
}
.jd p{
    position: absolute;
    z-index: 2;
}
ul li:nth-child(4) .xlk3 .jd::before{
    content: "";
    width: 0;
    height: 0;
    background-color: #00aee4;
    transition: all 1s; 
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 100px;
}
 ul li:nth-child(4) .jd:hover::before{
    width: 100%;
    height: 50px;
}
/* 酒店结束 */
/* 写字楼开始 */
.xzl{
    width: 100%;
    height: 50px;
}
.xzl p{
    position: absolute;
    z-index: 2;
}
ul li:nth-child(4) .xlk3 .xzl::before{
    content: "";
    width: 0;
    height: 0;
    background-color: #00aee4;
    transition: all 1s; 
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 50px;
}
 ul li:nth-child(4) .xzl:hover::before{
    width: 100%;
    height: 50px;
}
/* 写字楼结束 */
/* 养老健康开始 */
.yljk{
    width: 100%;
    height: 50px;
}
.yljk p{
    position: absolute;
    z-index: 2;
}
ul li:nth-child(4) .xlk3 .yljk::before{
    content: "";
    width: 0;
    height: 0;
    background-color: #00aee4;
    transition: all 1s; 
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 0px;
}
 ul li:nth-child(4) .yljk:hover::before{
    width: 100%;
    height: 50px;
}
/* 养老健康结束 */
.xlk3{
    width: 230px;
    height: 200px;
    background-color: white;
    z-index: 5;
    position: absolute;
     display: none; 
    margin-top: 23px;
}
.xlk3>p{
    display: block;
    width: 100%;
    height: 50px;
    position: absolute;
}
li:nth-child(4):hover .xlk3{
    display: block;
    background-color: white;
    position: absolute;
}
/* 公司新闻开始 */
.gsxw{
    width: 100%;
    height: 50px;
}
ul li:nth-child(5) .xlk4 .gsxw::before{
    content: "";
    width: 0;
    height: 0;
    background-color: #00aee4;
    transition: all 1s; 
    display: block;
    position: absolute;
    z-index: -1;
    bottom: 50px;
}
 ul li:nth-child(5) .gsxw:hover::before{
    width: 100%;
    height: 50px;
}
/* 公司新闻结束 */
/* 常见问题开始*/
.cjwt{
    width: 100%;
    height: 50px;
}
ul li:nth-child(5) .xlk4 .cjwt::before{
    content: "";
    width: 0;
    height: 0;
    background-color: #00aee4;
    transition: all 1s; 
    display: block;
    position: absolute;
    z-index: -1;
    bottom: 0px;
}
 ul li:nth-child(5) .cjwt:hover::before{
    width: 100%;
    height: 50px;
}
/* 常见问题结束 */
.xlk4{
    width: 230px;
    height: 100px;
    background-color: white;
    z-index: 5;
    position: absolute;
    display: none;
    margin-top: 23px;
}
.xlk4>p{
    display: block;
    width: 100%;
    height: 50px;
    position: absolute;
}
li:nth-child(5):hover .xlk4{
    display: block;
    background-color: white;
    position: absolute;
}
/* 加盟代理开始 */
.dljm{
    width: 100%;
    height: 50px;
}
ul li:nth-child(6) .xlk5 .dljm::before{
    content: "";
    width: 0;
    height: 0;
    background-color: #00aee4;
    transition: all 1s; 
    display: block;
    position: absolute;
    z-index: -1;
    bottom: 50px;
}
 ul li:nth-child(6) .dljm:hover::before{
    width: 100%;
    height: 50px;
}
/* 加盟代理结束 */
/* 在线订购开始 */
.zxdg{
    width: 100%;
    height: 50px;
}
ul li:nth-child(6) .xlk5 .zxdg::before{
    content: "";
    width: 0;
    height: 0;
    background-color: #00aee4;
    transition: all 1s; 
    display: block;
    position: absolute;
    z-index: -1;
    bottom: 0px;
}
 ul li:nth-child(6) .zxdg:hover::before{
    width: 100%;
    height: 50px;
}
/* 在线订购结束 */
.xlk5{
    width: 230px;
    height: 100px;
    background-color: white;
    z-index: 5;
    position: absolute;
    display: none;
    margin-top: 23px;
}
.xlk5>p{
    display: block;
    width: 100%;
    height: 50px;
    position: absolute;
}
li:nth-child(6):hover .xlk5{
    display: block;
    background-color: white;
    position: absolute;
}
ul li::after{
    content: "";
    display: block;
    width: 0;
    height: 3px;
    background-color: #00aee4;
    transition: all 1s;
    margin-top: 20px;
}
ul li:hover::after{
    width: 100%;
}
ul>li:nth-child(1){
    margin-left: 170px;
}
/* 图片部分 */
.gd{
    width: 1583px;
    height: 580px;
    margin: auto;
    overflow: hidden;
}
.donghua{
    display: flex;
    width: 3166px;
    height: 580px;
    animation: 2s  infinite;
    animation-name: gundong;
}
.gd>.donghua>img{
    width: 1583px;
    height: 580px;
}
@keyframes gundong{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-1583px);
    }
}
/* 图片部分结束 */
/* 图片下面文字部分 */
article{
    height: 437px;
    width: 100%;
    position: relative;
}
.bt{
    position: absolute;
    left: 600px;
    top: 50px;
}
.bt>h1{
    margin-bottom: 20px;
    font-size: 40px;
}
.bt>p{
    margin-left: 60px;
}
.ft{
    font-size: 30px;
    display: flex;
    position: relative;
    top: 300px;
}
.ft>div>a{
    margin-left: 100px;
    padding-left: 100px;
    display: block;
    width: 186px;
    padding-top: 68px;  
}
.ft>div>img{
    position: absolute;
    left: 200px;
    top: -50px;
}
.ft>div:nth-child(2)>img{
    left: 590px;
}
.ft>div:nth-child(3)>img{
    left: 970px;
}
.ft>div:nth-child(4)>img{
    left: 1360px;
}
.ft>div>a:hover{
    color: #00aee4;
}
.ft>div>a{
    color: black;
}
/* 中间进一步了解部分 */
section{
    height: 872px;
    width: 100%;
    background-color: #f2f2f2;
}
section>div:nth-child(1){
    position: absolute;
    left: 750px;
    top: 1230px;
    display: block;
}
section>div:nth-child(2){
    position: absolute; 
    left: 500px;
    top: 1300px;
    display: block;
}
section>div:nth-child(2) span{
    margin-left: 50px;
    transition: all 0.1s;
}
section>div:nth-child(2) span:hover{
    text-decoration: line-through;
    color: #00aee4;
}
.zhong{
    display: flex; 
    width: 1300px;
    margin: auto;
    position: relative;
    top: 200px;
}
.bjt1{
    position: relative; 
    height: 510.844px;
    padding: 18px 0px 20px 25px;
    z-index: 0;
}
.bjhz1>img{
    width: 401.656px;
    height: 401.656px;
}
.wz1{
    width: 374.656px;
    height: 54.188px;
    position: relative; 
    padding: 18px 0px 20px 25px;
    left: 30px;
    top: -40px;
}
.wz1::before{
    content:'';
    width: 10px;
    height: 0;
    background-color:#00aee4;
     position: absolute; 
    left: 0;
    bottom: 0;  
    transition:2s all;
}
.wz1::after{
    right: 0;
    width: 10px;
    height: 92.188px;
    position: absolute; 
    background-color:#00aee4;
    content:'';
    top: 0;
}
.bjhz1:hover .wz1::before{
    position: absolute; 
    height: 100%;
}
.bjt1>div{
    position: absolute;
}
.ycwz{
    position: absolute;
    top: 20px;
    width: 430px;
    height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ycwz>p{
    position:absolute;
    display: block;
    width: 80%;
    height: 40px;
    background-color: white;
    border-radius: 20px;
    z-index: 2;
    display: none;
    text-align: center;
    line-height: 40px;
    animation: size 1s linear;
    box-shadow: 10px 10px 3px rgb(0, 0, 0,0.3);
    overflow: hidden;
}
.ycwz p::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 0%;
    left: 0;
    top: 0;
    background-color: #00aee4;
    transition: all 1s;
    z-index: -1;
}
.ycwz p:hover{
    color: white;
}
.ycwz p:hover::before{
    height: 100%;
}
.ycwz::before,.ycwz::after{
    width: 100%;
    content: '';
    height: 0%;
    background-color:#00aee4;
    position:absolute;
    z-index: 1;
    transition: all 1s;
    bottom: 0;
    left: 0;
}
.bjt1:hover .ycwz::before{
    top: 0;
}
.bjt1:hover .ycwz::before{
    height: 50%;
}
.bjt1:hover .ycwz::after{
    height: 50%;
} 
.bjt1:hover .ycwz>p{
    display: block;
}
@keyframes size{
    from{
        transform: scale(0.5);
    }
    25%{
        transform: scale(1.2);
    }
    50%{
        transform: scale(0.8);
    }
    to{
        transform: scale(1);
    }
}
.jtz{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: relative;
    background-color: white;
    left: 730px;
    top: 180px;
}
.jtz>a::before{
    content: '<';
    color: #00aee4;
    position: absolute;
    left: 8px;
    top: 3px;
}
.jtz:hover{
    background-color: #00aee4;
}
.jtz:hover a::before{
    color: white;
}
.jty{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: relative;
    background-color: white;
    left: 770px;
    top: 149px;
}
.jty>a::before{
    content: '>';
    color: #00aee4;
    position: absolute;
    left: 8px;
    top: 3px;
}
.jty:hover{
    background-color: #00aee4;
}
.jty:hover a::before{
    color: white;
}
/* 三张图片下方文字 */
.h1{
    margin-left: 750px;
    margin-bottom: 20px;
    margin-top: 30px;
}
.span1{
    margin-left: 770px;
}
.txwz{
    background-color: #f0f0f0;
    width: 1172px;
    height: 269px;
    left: 208px;
    font-size: 13px;
    position: relative;
    top: 20px;
}
.txwz>div{
    width: 669px;
    left: 27px;
    position: absolute;
    top: 27px;
}
.txwz>div>h2{
    margin-bottom: 30px;
}
.txwz>div>.lj{
    margin-top: 20px;
    margin-left: 20px;
    border: 1px black  solid;
    width: 80px;
    height: 40px;
    border-radius: 20%;
}
.wzt{
    position: relative;
}
.txwz>div>.lj>a{
    line-height: 40px;
    margin-left: 15px;
    color: black;
}
.txwz>img{
    position: absolute;
    width: 400px;
    height: 250px;
    left: 750px;
    top: 10px;
}
.rdxw{
    height: 700px;
    width: 100%;
    border-top: 1px black solid;
    margin-top: 120px;
}
/* 热点新闻部分 */
.zjt{
    height: 14px;
    width: 40px;
    border: 1px solid black;
    border-radius: 5px;
    position: absolute;
    left:1120px ;
}
.zjt>a{
    position: absolute;
    top: -5px;
    left: 10px;
}

.yjt{
    height: 14px;
    width: 40px;
    border: 1px solid black;
    border-radius: 5px;
    position: absolute;
    left:1160px ;
}
.yjt>a{
    position: absolute;
    top: -5px;
    left: 10px;
}
.tp{
    position: relative;
}
 .rdxw>h2{
    margin-top: 118px;
    margin-left: 750px;
}
.ft1{
    width: 275px;
    left: 200px;
    top: 50px;
    position: absolute;
    
    transition: all 1s;
}
.ft1:hover{
    box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3);
    transform: translateY(-10px);
}
.ft1>img{
    width: 275px;
    height: 201px;
}
.ft2{
    width: 275px;
    position: absolute;
    left: 500px;
    top: 50px;
    transition: all 1s;
}
.ft2:hover{
    box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3);
    transform: translateY(-10px);
}
.ft2>img{
    width: 275px;
    height: 201px;
}
.ft3{
    width: 275px;
    position: absolute;
    left: 800px;
    top: 50px;
    transition: all 1s;
}
.ft3:hover{
    box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3);
    transform: translateY(-10px);
}
.ft3>img{
    width: 275px;
    height: 201px;
}
.ft4{
    width: 275px;
    position: absolute;
    left: 1100px;
    top: 50px;
    transition: all 1s;
}
.ft4:hover{
    box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3);
    transform: translateY(-10px);
}
.ft4>img{
    width: 275px;
    height: 201px;
}
.p1{
    margin-top: 20px;
}
.yy{
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
}
/* footer内容 */
footer{
    height: 193px;
    width: 100%;
}
.xdh{
    background-color: #00aee4;
    height: 50px;
    width: 100%;
}
.xdh>a{
    margin-left: 80px;
    line-height: 50px;
    color: white;
    font-size: 20px;
}
.xdh>a:nth-child(1){
    margin-left: 200px;
}
.xdh>img{
    width: 33px;
    height: 30px;
    margin-left: 30px;
    margin-top: 5px;
}
.xdh>p{
    position: absolute;
}
.p5{
   left: 300px;
   top: 3340px; 
}
.p4{
    left: 600px;
    top: 3300px; 
}
.p6{
    left: 500px;
    top: 3380px;
}